<template>
  <base-page-view class-name="inventory-release">
    <template v-if="pageLoaded">
      <template v-if="emptyFlag">
        <!-- 头部 -->
        <view class="header">
          <view>提示：您可以将云仓内的库存直接下拨给其他用户，请确保接收人已线下支付货款后再下拨，下拨成功后接收人的身份将变更。</view>
        </view>

        <!-- 待下拨 -->
        <view class="box goods-item">
          <b-image class-name="img" :src="releaseData.box_series.img" mode="aspectFill" />
          <view class="sub-item">
            <view class="name">{{ releaseData.box_series.series_name }}</view>
            <view class="footer">
              <view class="inventory"><text class="text">库存</text>{{ releaseData.box_stock.stock_number }}</view>
            </view>
          </view>
        </view>
        <view class="box goods-item inventory-box">
          <view class="text">下拨数量</view>
          <view>
            <base-stepper :value.sync="formData.allocate_number" :min="releaseData.box_allocate_activity.least_allocate_number" :max="releaseData.box_allocate_activity.least_allocate_number>releaseData.box_stock.stock_number?releaseData.box_allocate_activity.least_allocate_number:releaseData.box_stock.stock_number" :size="34" :border-radius="4" @change="changeNum"></base-stepper>
          </view>
        </view>
        <!-- 可转换 -->
        <view class="box-transform">
          <view class="title">请选择库存下拨接收人信息</view>
          <view class="content">
            <view class="product-remark">
              <view class="o-span">接收人手机号</view>
              <input v-model="formData.mobile" class="o-input" placeholder-class="input-placeholder" type="text" placeholder="请输入手机号" @input="clearNickName" />
              <view class="btn" @click="queryName">查询</view>
            </view>
            <view class="product-remark">
              <view class="o-span">接收人昵称</view>
              <input v-model="formData.nickname" class="o-input" placeholder-class="input-placeholder" type="text" placeholder="请先输入手机号进行查询" disabled />
            </view>
          </view>
        </view>

        <!-- 底部 -->
        <footer-bar background="#F5F5F5">
          <view class="footer-content">
            <view class="line-data">
              <view>说明：下拨后接收人将获得箱起相关权益</view>
            </view>
            <view class="btn" :class="{ disabled: releaseData.box_allocate_activity.least_allocate_number>releaseData.box_stock.stock_number }" @click="release">{{ releaseData.box_allocate_activity.least_allocate_number>releaseData.box_stock.stock_number?'云仓库存不足':'下拨' }}</view>
          </view>
        </footer-bar>
      </template>
      <view v-else class="empty-content">
        <msg-page type="empty_list" text="该云仓未配置相应的下拨活动" btn-text="返回" @btnClick="btnClick"></msg-page>
      </view>
      <g-message ref="myMessage">
        <view class="msg-box">
          <view class="msg-info">
            <text>下拨数量：</text>
            <text class="num">{{ formData.allocate_number }}</text>
          </view>
          <view class="msg-info">
            <text>接收人昵称：</text>
            <text class="num">{{ formData.nickname }}</text>
          </view>
          <view class="msg-info">
            <text>接收人手机号：</text>
            <text class="num">{{ formData.mobile }}</text>
          </view>
        </view>
      </g-message>
    </template>
  </base-page-view>
</template>
<script>
import baseStepper from '@/components/base/base-stepper.vue'
import footerBar from '@/components/footerBar/index.vue'
import msgPage from '@/components/msgPage/index.vue'
import gMessage from '@/components/global/gc-message/gc-message'
import './release.scss'
export default {
  name: 'InventoryRelease',
  components: {
    baseStepper,
    footerBar,
    msgPage,
    gMessage
  },
  data() {
    return {
      pageLoaded: false,
      releaseData: {},
      options: {},
      emptyFlag: false,
      formData: {
        allocate_number: 1,
        goods_id: '',
        sku_code: '',
        receive_user_id: '',
        mobile: '',
        nickname: ''
      }
    }
  },
  onLoad(options) {
    this.options = options || {}
    this.formData.receive_user_id = this.options ? this.options.user_id : ''
    this.formData.goods_id = this.options ? this.options.goods_id : ''
    this.formData.sku_code = this.options ? this.options.sku_code : ''
    if (this.options) {
      this.fetchData()
    } else {
      uni.showToast({ title: '未获取到箱起数据', icon: 'none' })
    }
  },
  methods: {
    clearNickName() {
      if (this.formData.nickname) {
        this.formData.nickname = ''
      }
    },
    // 获取可兑换箱起列表
    async fetchData() {
      const res = await this.$api.boxApi.queryStockInfo({
        goods_id: this.options.goods_id,
        sku_code: this.options.sku_code
      })
      if (res.success && res.data) {
        this.releaseData = res.data
        this.emptyFlag = true
      }
      this.pageLoaded = true
    },
    // 查询昵称
    async queryName() {
      if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(this.formData.mobile))) {
        uni.showToast({ title: '请先输入正确的手机号', icon: 'none' })
        return
      }
      const res = await this.$api.boxApi.queryName({
        mobile: this.formData.mobile
      })
      if (res.success && res.data) {
        this.formData.nickname = res.data.nickname
        this.formData.receive_user_id = res.data.user_id
      }
    },

    // 更改下拨数量
    changeNum(num) {
      this.formData.allocate_number = num
    },

    // 点击返回
    btnClick() {
      uni.navigateBack()
    },

    // 下拨
    release() {
      if (this.releaseData.box_allocate_activity.least_allocate_number > this.releaseData.box_stock.stock_number) return
      if (!this.formData.mobile) {
        uni.showToast({ title: '请先输入手机号进行查询', icon: 'none' })
        return
      }
      if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(this.formData.mobile))) {
        uni.showToast({ title: '请先输入正确的手机号', icon: 'none' })
        return
      }
      if (!this.formData.nickname) {
        uni.showToast({ title: '请先输入手机号进行查询', icon: 'none' })
        return
      }
      this.$refs.myMessage.show({
        title: '信息确认',
        showMessage: true,
        confirmText: '确定',
        cancelText: '修改',
        align: 'center',
        confirm: async() => {
          const res = await this.$api.boxApi.stockAllocate(this.formData)
          if (res.success) {
            uni.showToast({ title: '库存下拨成功', icon: 'none' })
            setTimeout(() => {
              this.$navigateTo(`/pagesOrder/orderSuccess/index?stock_id=${this.releaseData.box_stock.id}&series_id=${this.releaseData.box_series.series_id}&boxType=release`, '', 'redirectTo')
            }, 1500)
          }
        }
      })
    }
  }
}
</script>
